<template>
	<view class="content">
		<view class="content_a">
			<view class="aaaaa"></view>
			<view class="content_aa"> 个人中心 </view>
			<!-- <image src="../../static/shezhi.png" @click="sz"></image> -->
		</view>
		<view class="me_a">
			<view class="aaaaa"></view>
			<view class="me_a_a" @click="gren">
				<image :src="data.picture" mode=""></image>
				<view class="me_a_b">
					<p class="me_a_bb">{{ data.nickname }}</p>
					<!-- <p class="me_a_bc">ID:{{data.id}}</p> -->
				</view>
			</view>
			<view class="me_bonn" style="justify-content: space-around">
				<view class="me_bonn_a">
					<image src="../../static/mepage_a.png" mode=""></image>
					<div>
						<p class="me_bonn_ac">收益金额: {{ data.money }}</p>
					</div>
				</view>
				<view class="me_bonn_a">
					<image src="../../static/mepage_b.png" mode=""></image>
					<div>
						<p class="me_bonn_ac">好友人数: {{ data.team_num }}</p>
					</div>
				</view>
				<!-- <view class="me_bonn_a">
					<p class="me_bonn_ab">{{data.team_num}}</p>
					<p class="me_bonn_ac">团队人数</p>
				</view> -->
			</view>
		</view>
		<view class="neirong">
			<view class="neirong_a" @click="yue">
				<view class="neirong_a_a">
					<image src="../../static/mepage_c.png" mode=""></image>
					<span>我的余额</span>
				</view>
				<image src="../../static/me_right.png" mode=""></image>
			</view>

			<view class="neirong_a" @click="tuandui">
				<view class="neirong_a_a">
					<image src="../../static/mepage_d.png" mode=""></image>
					<span>我的团队</span>
				</view>
				<image src="../../static/me_right.png" mode=""></image>
			</view>
			<view class="neirong_a" @click="yq">
				<view class="neirong_a_a">
					<image src="../../static/mepage_e.png" mode=""></image>
					<span>邀请好友</span>
				</view>
				<image src="../../static/me_right.png" mode=""></image>
			</view>
			<view class="neirong_a" @click="chouc">
				<view class="neirong_a_a">
					<image src="../../static/mepage_f.png" mode=""></image>
					<span>抽成比例</span>
				</view>
				<image src="../../static/me_right.png" mode=""></image>
			</view>
			<view class="neirong_a" @click="fankui">
				<view class="neirong_a_a">
					<image src="../../static/mepage_g.png" mode=""></image>
					<span>意见反馈</span>
				</view>
				<image src="../../static/me_right.png" mode=""></image>
			</view>
			<view class="neirong_a" @click="download">
				<view class="neirong_a_a">
					<image src="../../static/xiazai.png" mode=""></image>
					<span>下载</span>
				</view>
				<image src="../../static/me_right.png" mode=""></image>
			</view>
			<view class="neirong_a" @click="sz">
				<view class="neirong_a_a">
					<image src="../../static/mepage_h.png" mode=""></image>
					<span>设置</span>
				</view>
				<image src="../../static/me_right.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			data: {
				uid: "",
			},
		};
	},
	onLoad() {
		this.mine();
	},
	onShow() {
		this.mine();
	},
	methods: {
		myOrdr() {
			uni.switchTab({
				url: "./renwu_a",
			});
		},
		async mine() {
			let obj = {
				uid: uni.getStorageSync("uid"),
			};
			const res = await this.$u.post("api/user/user_index", obj, {});
			if (!res.code) uni.$showMsg();
			this.data = res.data;
		},
		sz() {
			wx.navigateTo({
				url: "./me/she_zhi",
			});
		},
		download(){
			uni.navigateTo({
				url: 'me/xiazai',
			});
		},
		gren() {
			wx.navigateTo({
				url: "./me/geren",
			});
		},
		yue() {
			wx.navigateTo({
				url: "./me/me_yue",
			});
		},
		tuandui() {
			wx.navigateTo({
				url: "./me/me_tuandui",
			});
		},
		chouc() {
			wx.navigateTo({
				url: "./me/choucheng",
			});
		},
		fankui() {
			wx.navigateTo({
				url: "./me/yijian_fankui",
			});
		},
		xia_zai() {
			wx.navigateTo({
				url: "./me/xiazai",
			});
		},
		yq() {
			wx.navigateTo({
				url: "./me/yao_qing",
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.neirong_a_a span {
	font-size: 26rpx;
}

.content {
	width: 100%;
	height: 100vh;
	background-color: #f5f8fd;
	position: relative;
}

.content_a {
	width: 100%;
	height: 222rpx;
	background-color: #fa341b;

	.aaaaa {
		width: 100%;
		height: 20rpx;
	}

	.content_aa {
		width: 150rpx;
		margin: auto;
		height: 50rpx;
		text-align: center;
		color: #ffffff;
		font-weight: bold;
		font-size: 36rpx;
	}

	image {
		width: 45rpx;
		height: 45rpx;
		position: fixed;
		top: 25rpx;
		left: 650rpx;
	}
}

.me_a {
	width: 690rpx;
	height: 268rpx;
	background-color: #ffffff;
	border-radius: 10rpx;
	position: absolute;
	top: 90rpx;
	left: 30rpx;

	.aaaaa {
		width: 100px;
		height: 20rpx;
	}

	.me_a_a {
		width: 650rpx;
		height: 100rpx;
		margin: auto;
		display: flex;

		image {
			width: 100rpx;
			height: 100rpx;
			background-color: #f5f5f5;
			border-radius: 50%;
		}

		.me_a_b {
			width: 500rpx;
			height: 100rpx;
			margin-left: 20rpx;

			.me_a_bb {
				width: 500rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.me_a_bc {
				font-size: 18rpx;
				color: #333333;
				line-height: 35px;
			}
		}
	}

	.me_bonn {
		width: 650rpx;
		margin: auto;
		height: 100rpx;
		margin-top: 25rpx;
		display: flex;
		justify-content: space-between;

		.me_bonn_a {
			display: flex;
			flex-direction: column;
			align-items: center;

			p {
				display: inline-block;
				padding-top: 10rpx;
				font-size: 22rpx;
			}

			image {
				width: 56rpx;
				height: 56rpx;
			}

			.me_bonn_ab {
				width: 120rpx;
				height: 50rpx;
				text-align: center;
				color: #333333;
			}

			.me_bonn_ab {
				width: 120rpx;
				height: 50rpx;
				text-align: center;
				color: #333333;
			}
		}
	}
}

.neirong {
	width: 690rpx;
	margin-top: 160rpx;
	background-color: #ffffff;
	margin-left: 30rpx;
	border-radius: 10rpx;

	.neirong_a {
		width: 100%;
		height: 88rpx;
		border-bottom: 1rpx solid #f5f5f5;
		display: flex;
		justify-content: space-between;
		align-items: center;

		image {
			width: 11rpx;
			height: 20rpx;
			margin-right: 20rpx;
		}

		.neirong_a_a {
			height: 88rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 88rpx;
			color: #333333;
			margin-left: 20rpx;
			display: flex;
			align-items: center;

			image {
				width: 41rpx;
				height: 41rpx;
				margin-right: 20rpx;
			}
		}
	}
}
</style>
